<template>
    <div>
        <div class="searchBox">
            <Form :label-width="120" class="search-form">
                <Row>
                    <Col :span="5">
                        <FormItem label="一级故障分类">
                            <Select v-model="searchParams.firstclass" clearable filterable>
                                <Option v-for="item in classifyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
<!--                            <Select-->
<!--                                    v-model="searchParams.firstclass"-->
<!--                                    filterable-->
<!--                                    clearable-->
<!--                                    :remote-method="handleRemote"-->
<!--                                    :loading="loading"-->
<!--                            >-->
<!--                                <Option v-for="item in classifyList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--                            </Select>-->
<!--                            <Input type="text" clearable v-model="searchParams.firstclass" placeholder="请输入一级故障分类"></Input>-->
                        </FormItem>
                    </Col>
                    <Col :span="5">
                        <FormItem label="二级故障分类">
                            <Select v-model="searchParams.secondclass" clearable filterable>
                                <Option v-for="item in classifySecondList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
<!--                            <Select-->
<!--                                    v-model="searchParams.secondclass"-->
<!--                                    filterable-->
<!--                                    clearable-->
<!--                                    :remote-method="handleSecondRemote"-->
<!--                                    :loading="loading"-->
<!--                            >-->
<!--                                <Option v-for="item in classifySecondList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--                            </Select>-->
<!--                            <Input type="text" clearable v-model="searchParams.secondclass" placeholder="请输入二级故障分类"></Input>-->
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="维修时间：">
                            <DatePicker type="datetimerange" placement="bottom-end" :value="dateTimeRange" :placeholder="`${$t('common.selectInfo')}`" clearable @on-change="handleChangeDate"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col :span="4" align="center">
                        <Button type="primary" @click="onSearch" v-if="checkBtnPermission.workorderReportSheet2">{{$t('common.Query')}}</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="btns clear">
            <span  class="creatBtnright" @click="onExport" v-if="checkBtnPermission.workorderReportExportSheet2">
                <span><Icon type="ios-cloud-download-outline" /></span>
                <span class="rightbtn">导出设备故障数据汇总报表</span>
            </span>
        </div>
        <div class="tableContent">
            <Table :columns="columns" :data="list"></Table>
        </div>
        <div class="pageWrap">
            <Page
                    :total="total"
                    :page-size="pageSize"
                    :page-size-opts="$variable.pageSizes"
                    :current="pageNum"
                    @on-change="changePageNum"
                    @on-page-size-change="changePageSize"

                    show-sizer
                    show-total
            />
        </div>
        <div style="margin-top: 10px;background: #fff;">
            <Row>
                <Col :span="24">
                    <div id="main" style="width: 100%;height:400px;"></div>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import fileDownload from 'js-file-download'
    import * as echarts from 'echarts';
    export default {
        name: "brokenTotalList",
        data() {
            return {
                loading: false,
                total: 0,
                pageNum: 1,
                pageSize: 10,
                searchParams: {},
                checkBtnPermission: {},
                columns: [
                    {
                        title: '一级故障分类',
                        key: 'firstclass',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '二级故障分类',
                        key: 'secondclass',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '停机时长（h）',
                        key: 'stoptimes',
                        align: 'center',
                        minWidth: 120,
                    },
                    {
                        title: '维修工时（h）',
                        key: 'maintaintimes',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '停机占比（%）',
                        key: 'stoppercents',
                        align: 'center',
                        minWidth: 200
                    },
                ],
                list: [],
                orgList: [],
                dateTimeRange: [],
                classifyList: [],
                classifySecondList: [],
            }
        },
        created() {
            this.getList()
            this.getFirstList()
            this.getSecondList()
        },
        mounted() {
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="workorderReportSheet2"){
                    this.checkBtnPermission.workorderReportSheet2 = true
                }
                if(item.code=="workorderReportExportSheet2"){
                    this.checkBtnPermission.workorderReportExportSheet2 = true
                }
            }
            this.drawChart()
        },
        methods: {
            getFirstList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderDealType/selectClassList',
                    params: {
                        type : 1
                    }
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.classifyList = res.data
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            getSecondList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderDealType/selectClassList',
                    params: {
                        type : 2
                    }
                }).then(res => {
                    
                    if (res.code === 200) {
                        this.classifySecondList = res.data
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleRemote(query) {
                if (query !== '') {
                    this.loading = true;
                    this.axios({
                        method: 'get',
                        url: '/workorder/workorderDealType/selectClassList',
                        params: {
                            classname: query,
                            type : 1
                        }
                    }).then(res => {
                        
                        if (res.code === 200) {
                            this.classifyList = res.data
                        }else {
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                } else {
                    this.classifyList = [];
                }
            },
            handleSecondRemote(query) {
                if (query !== '') {
                    this.loading = true;
                    this.axios({
                        method: 'get',
                        url: '/workorder/workorderDealType/selectClassList',
                        params: {
                            classname: query,
                            type : 2
                        }
                    }).then(res => {
                        
                        if (res.code === 200) {
                            this.classifySecondList = res.data
                        }else {
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                } else {
                    this.classifySecondList = [];
                }
            },
            drawChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById("main"));
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "8%",
                        containLabel: true,
                    }, // 整体gird表示图的位置
                    legend: {
                        x: "center",
                        y: "bottom",
                        itemHeight: 8,
                        itemWidth: 8,
                    }, // legend表示文字的样式，位置。itemHeight和itemWidth相等，表示的就是正方形
                    color: ["#218AFF", "#47B8D9"], // 文字的颜色
                    xAxis: [ // x坐标的相关配置
                        {
                            type: "category",
                            data: this.list.map((item) => item.secondclass), // 对数据的渲染
                            axisPointer: { // 鼠标移入的效果
                                type: "line", // 线
                                lineStyle: {
                                    color: "#6b6b6b", // 线的颜色
                                    type: "solid",
                                    // width: 40,
                                },
                            },
                            axisTick: { // x轴是否显示刻度线
                                show: false,
                            },
                            axisLine: { // 是否显示x轴最下面的线，以及线的样式
                                show: true,
                                lineStyle: {
                                    color: "#818286",
                                },
                            },
                        },
                    ],
                    yAxis: [ // 由于是折柱混合，所以要有两个y轴，那么就要对两个y轴进行属性样式设定
                        { // 左边y轴
                            type: "value",
                            axisLabel: { // y轴的坐标
                                formatter: function (value) {
                                    return value + "h";
                                },
                            },
                            axisTick: {
                                show: false,
                            }, // 是否显示刻度线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }, //画y轴的线
                            axisLine: {
                                show: false, // y轴最左边的线是否显示
                                lineStyle: {
                                    color: "#989898", // y轴最左边的单位的样式
                                },
                            },// y轴最左边的线的样式
                        },
                        // y轴右边线的样式，和左边同理
                        {
                            type: "value",
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "#989898",
                                },
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed'
                                }
                            },
                            axisLabel: {
                                formatter: function (value) {
                                    return value + "%";
                                },
                            },
                        },
                    ],
                    series: [ // 圆柱和曲线的绘制
                        {
                            name: "停机时长",
                            type: "bar", // 圆柱
                            color: "#1362FE",
                            barWidth: 40, // 圆柱的宽
                            //  stack: '1',

                            itemStyle: { // 圆柱的样式
                                //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                                emphasis: {
                                    barBorderRadius: 30,
                                    // barBorderColor: "rgba(0,0,0,0)",
                                    // color: "rgba(0,0,0,0)",
                                },
                                normal: {
                                    //柱形图圆角，初始化效果
                                    barBorderRadius: [6, 6, 0, 0],
                                    marginBottom: 20,
                                    // barBorderColor: "rgba(0,0,0,0)",
                                    // color: "rgba(0,0,0,0)",
                                },
                            },
                            data: this.list.map((item) => (item.stoptimes)), // 圆柱数据的渲染
                        },

                        {// 折现的渲染配置
                            name: "停机占比",
                            color: "#FB7829",
                            type: "line", //线
                            smooth: true, // 光滑
                            symbol: "none",//  鼠标滑过，是否显示小圆点
                            yAxisIndex: 1, // 不重叠,如果是多个图，可以给yAxisIndex分别设置1，2，3，....
                            data: this.list.map((item) =>(item.stoppercents)), // 折现的数据渲染
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            handleChangeDate(val) {
                console.log(val)
                this.searchParams.beginDate = val[0]
                this.searchParams.endDate = val[1]
            },
            changePageSize(val) {
                this.pageSize = val
                this.getList()
            },
            changePageNum(val) {
                this.pageNum = val
                this.getList()
            },
            onSearch() {
                this.pageNum = 1;
                this.getList()
            },
            getList() {
                let params = {
                    pageNo:this.pageNum,
                    pageSize:this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (key === 'orgCode' && this.searchParams['orgCode']) {
                        const arr = this.searchParams[key]
                        const { length, last=length-1 } = arr
                        this.$set(params, key, arr[last])
                    }else {
                        if (this.searchParams[key]) {
                            this.$set(params, key, this.searchParams[key])
                        }
                    }

                }
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderReport/sheet2',
                    params: params
                }).then(res => {
                    
                    if(res.code === 200){
                        this.list = res.data.list
                        this.total = res.data.total
                        this.drawChart()
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            onExport() {
                let params = {};
                for (let key in this.searchParams) {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
                const filName = '设备故障数据汇总报表'
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderReport/exportSheet2',
                    responseType: 'blob',
                    params: params
                }).then(res => {
                    fileDownload(res, filName + '.xlsx')
                })

            },
        },
    }
</script>

<style scoped>

</style>
